<!-- 消息列表 -->
<script setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { reactive } from 'vue'
// 全局数据
const data = reactive({
  list: [],
  page: 1,
  status: 'loadmore'
})
// 首次加载
onLoad(options => {
  // getList()
})
// 监听页面滚动到底部
onReachBottom(() => {
  // getList()
})
// 查询列表
function getList() {
  console.log('页面', data.page)
  if (data.page >= 3) return
  data.status = 'loading'
  setTimeout(() => {
    for (let i = 0; i < 20; i++) {
      data.list.push({
        time: '今天 08:20',
        type: '1',
        content: '这是通知标题这是通知标题这是通知标题这是通知标题'
      })
    }
    data.page++
    data.status = data.page >= 3 ? 'nomore' : 'loadmore'
  }, 2000);
}
// 前往详情页面
function goDetail() {
  uni.navigateTo({
    url: '/subPackage/my/message/detail'
  })
}
</script>

<template>
  <view class="message-page">
    <!-- 空状态 -->
    <up-empty v-if="data.list.length <= 0" mode="message" text="暂无通知" marginTop="200rpx">
    </up-empty>
    <!-- 列表 -->
    <template v-else>
      <view class="list">
        <view class="item" v-for="(item, index) in data.list" :key="index" @click="goDetail">
          <!-- 角标 -->
          <up-badge type="error" :isDot="true" :absolute="true" :offset="['12rpx', '12rpx']"></up-badge>
          <!-- 标题 -->
          <view class="head">
            <text class="type-name">普通通知</text>
            <text class="time">今天 08:20</text>
          </view>
          <!-- 内容 -->
          <view class="cnt">
            <view class="left">
              <image style="width: 100rpx; height: 100rpx;" v-if="true" src="/static/images/icons/message1.png"
                mode="scaleToFill" />
              <image style="width: 100rpx; height: 100rpx;" v-if="false" src="/static/images/icons/message2.png"
                mode="scaleToFill" />
              <image style="width: 100rpx; height: 100rpx;" v-if="false" src="/static/images/icons/message1.png"
                mode="scaleToFill" />
            </view>
            <view class="right">
              <view class="title">{{ item.content }}</view>
              <view class="btn">
                <text>查看详情</text>
                <view class="img-box">
                  <image style="width: 28rpx; height: 30rpx;" src="/static/images/icons/message_detail.png"
                    mode="scaleToFill" />
                </view>

              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 加载更多 -->
      <up-loadmore :status="data.status" :loading-text="`努力加载中`" :loadmore-text="'加载更多'" :nomore-text="'没有更多了'" />
    </template>
  </view>
</template>

<style lang="scss" scoped>
.message-page {
  min-height: 100vh;
  padding: 32rpx;
  background-color: #F9F9F9;

  .list {
    & .item {
      position: relative;
      margin-bottom: 24rpx;
      padding: 32rpx;
      background-color: #FFFFFF;
      border-radius: 10rpx 10rpx 10rpx 10rpx;

      // 标题
      & .head {
        display: flex;
        align-items: center;
        justify-content: space-between;

        & .type-name {
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
        }

        & .time {
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
        }
      }

      // 内容
      & .cnt {
        display: flex;
        margin-top: 24rpx;

        & .left {
          width: 100rpx;
          height: 100rpx;
          border-radius: 20rpx;
          overflow: hidden;
        }

        & .right {
          margin-left: 16rpx;
          width: 506rpx;

          & .title {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          & .btn {
            margin-top: 12rpx;
            display: flex;
            align-items: center;

            & text {
              font-weight: 500;
              font-size: 24rpx;
              color: #FFC870;
            }

            & .img-box {
              margin-left: 6rpx;
              line-height: 0rpx;
            }
          }
        }
      }
    }
  }
}
</style>